import XtxSkeleton from "@/components/skeleton/index.vue"
import XtxCarousel from "@/components/carousel/index.vue"  //轮播图
import XtxMore from "@/components/more/index.vue"
import {App} from 'vue'  //类型
import {useIntersectionObserver} from "@vueuse/core"  //下载包导入方法
import defaultImg from "@/assets/images/200.png"  //本地图片
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from './city/index.vue'
import XtxNumbox from './numbox/index.vue'
import XtxButton from './button/index.vue'
import XtxCheckbox from './checkbox/index.vue'
import XtxMessage from './message/message.vue'




export default {
    //install注册组件
    install( app : App ){
        //骨架组件
        app.component(XtxSkeleton.name,XtxSkeleton)  
        app.component(XtxCarousel.name,XtxCarousel)
        app.component(XtxMore.name,XtxMore)
        app.component(Bread.name,Bread)
        app.component(BreadItem.name,BreadItem)
        app.component(XtxCity.name,XtxCity)
        app.component(XtxNumbox.name,XtxNumbox)
        app.component(XtxButton.name,XtxButton)
        app.component(XtxCheckbox.name,XtxCheckbox)
        app.component(XtxMessage.name,XtxMessage)






        //!图片懒加载的自定义指令
        app.directive('lazy',{
          mounted(el,binding){
              const { stop } =useIntersectionObserver(el,([{isIntersecting}] , observerElement)=>{
                  if(isIntersecting){
                  //停止监听
                  stop()
                  //console.log('stop停止监听');
                  //当前元素设置src
                  el.src=binding.value
                  //图片加载失败设置默认图片
                  el.onerror=()=>{
                      el.src = defaultImg
                  }
                 }
              })
            }
        })
    }
}

